<template>
  <div id="works-blog-item">
    <div class="data-word">
      <el-row>
        <el-col :span="6">
          <h1 class="title">文章总数</h1>
          <span class="number">{{ articleCount }}</span>
        </el-col>
        <!-- <el-col :span="6">
          <h1 class="title">评论数</h1>
          <span class="number">{{ commentCount }}</span>
        </el-col> -->
        <el-col :span="6">
          <h1 class="title">阅读量</h1>
          <span class="number">{{ recordCount }}</span>
        </el-col>
      </el-row>
    </div>
    <div class="data-echarts">
      <div class="all-blog-tab">
        <span>全部文章</span>
      </div>
      <div class="data-echarts-option">
        <div class="day">{{ range }}<span v-if="range">天</span></div>
        <div class="block">
          <el-date-picker
            size="small"
            v-model="value"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="selectDataRange"
          >
          </el-date-picker>
        </div>
        <el-button-group class="button-group">
          <el-button
            icon="el-icon-pie-chart"
            :class="dataType === 'echarts' ? 'active' : ''"
            size="small"
            @click="clickEcharts"
            >趋势图</el-button
          >
          <el-button icon="el-icon-menu" :class="dataType === 'form' ? 'active' : ''" size="small" @click="clickForm"
            >数据列表</el-button
          >
        </el-button-group>
      </div>
      <div class="echarts" style="width: 100%; height: 450px" ref="echarts"></div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.initDate()
    this.getRecordCount()
    // this.getCommentCount()
    this.getArticleCount()
  },
  mounted() {
    this.getEchartsData()
  },
  data() {
    return {
      range: 7,
      value: [],
      dataType: 'echarts',
      recordCount: 0,
      commentCount: 0,
      articleCount: 0,
      pickerOptions: {
        disabledDate(time) {
          // 禁用以后的时间
          return time.getTime() > Date.now() - 8.64e6
        }
        // shortcuts: [
        //   {
        //     text: '最近一周',
        //     onClick(picker) {
        //       const end = new Date()
        //       const start = new Date()
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        //       picker.$emit('pick', [start, end])
        //     }
        //   },
        //   {
        //     text: '最近一个月',
        //     onClick(picker) {
        //       const end = new Date()
        //       const start = new Date()
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        //       picker.$emit('pick', [start, end])
        //     }
        //   },
        //   {
        //     text: '最近三个月',
        //     onClick(picker) {
        //       const end = new Date()
        //       const start = new Date()
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        //       picker.$emit('pick', [start, end])
        //     }
        //   }
        // ]
      },
      echartsData: {
        views: []
      },
      params: {
        limit: 7
      }
    }
  },
  methods: {
    getRecordCount() {
      this.$ajax({
        url: this.$ajax.setUrl('/article/allRecord'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.recordCount = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getCommentCount() {
      this.$ajax({
        url: this.$ajax.setUrl('/article/commentCount'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.commentCount = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getArticleCount() {
      this.$ajax({
        url: this.$ajax.setUrl('/article/count'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.articleCount = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    clickEcharts() {
      this.dataType = 'echarts'
    },
    clickForm() {
      this.dataType = 'form'
      this.$message.warning('占无此功能')
    },
    selectDataRange(value) {
      this.range = Math.ceil((value[1].getTime() - value[0].getTime()) / (1000 * 3600 * 24)) + 1
      this.getEchartsData()
    },
    initDate() {
      this.range = 7
      let end = new Date()
      let start = end.getTime() - 24 * 3600 * 1000 * (7 - 1)
      start = new Date(start)
      this.value = [start, end]
    },
    getDivideDate() {
      if (this.range > 7) {
        // 选择日期范围大于7，分成6份，这样echarts展示就是7个了。
        const frame = this.range / 6
        let start = this.value[0]
        const arr = []
        for (let i = 0; i < 7; i++) {
          start = new Date(start)
          const { year, month, day } = this.$utils.getYearMonthDay(start)
          start = start.getTime() + 24 * 3600 * 1000 * frame
          arr.push(`${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`)
        }
        return arr
      } else {
        let start = this.value[0]
        const arr = []
        for (let i = 0; i < this.range; i++) {
          start = new Date(start)
          const { year, month, day } = this.$utils.getYearMonthDay(start)
          start = start.getTime() + 24 * 3600 * 1000
          arr.push(`${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`)
        }
        return arr
      }
    },
    getEchartsData() {
      this.$emit('isLoading', true)
      this.$ajax({
        url: this.$ajax.setUrl('/article/viewsEchart'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          let result = []
          let dateArr = this.getDivideDate()
          for (let i = 0; i < dateArr.length; i++) {
            if (data.data[dateArr[i]]) {
              result.push(data.data[dateArr[i]])
            } else {
              result.push(0)
            }
          }
          this.echartsData.views = result
          this.initEcharts()
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.$emit('isLoading', false)
      })
    },
    initEcharts() {
      const dom = this.$refs.echarts
      const myChart = this.$echarts.init(dom)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['阅读量', '评论数', '粉丝数', '收藏量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          right: '3%',
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [...this.getDivideDate()]
        },
        yAxis: {
          type: 'value',
          realtimeSort: true
        },
        series: [
          {
            name: '阅读量',
            type: 'line',
            data: [...this.echartsData.views],
            smooth: true
          },
          {
            name: '评论数',
            type: 'line',
            data: [...this.echartsData.views],
            smooth: true
          },
          {
            name: '粉丝数',
            type: 'line',
            data: [...this.echartsData.views],
            smooth: true
          },
          {
            name: '收藏量',
            type: 'line',
            data: [...this.echartsData.views],
            smooth: true
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss">
#works-blog-item {
  .data-word {
    text-align: center;
    .title {
      margin-bottom: 12px;
      line-height: 22px;
      font-size: 16px;
      color: #3d3d3d;
    }
    .number {
      font-size: 24px;
      font-weight: 600;
      color: #2e2e2e;
      line-height: 33px;
    }
  }
  .data-echarts {
    .all-blog-tab {
      margin-top: 20px;
      font-weight: 500;
      color: #222226;
      cursor: pointer;
    }
    .data-echarts-option {
      display: flex;
      margin: 30px 0 30px 100px;
      .day {
        height: 32px;
        line-height: 32px;
      }
      & > div {
        margin: 0 20px;
      }
      .button-group {
        .active {
          background-color: #e5f2ff;
          text-shadow: none;
          color: #409eff;
        }
      }
    }
  }
  .echarts {
    margin-top: 50px;
  }
}
</style>
